// window.onload = function(){
// 	var img_list = document.getElementsByClassName('img_list');

// 	var box = document.getElementById('box');

// 	var click_list = document.getElementsByClassName('click_list');

// 	var click_left = document.getElementById('click_left');

// 	var click_right = document.getElementById('click_right');

// 	var a = 0;

// 	function roll(){
// 		for (var i = 0; i < img_list.length; i++) {
			
// 			img_list[i].style.display ='none';
			
// 			click_list[i].style.backgroundColor ='#657C87';
		
// 		};

// 		img_list[a].style.display ='block';

// 		click_list[a].style.backgroundColor ='#FFF';
		
// 		a++

// 		if (a==img_list.length) {
// 			a=0
// 		};
// 	}

// 	var time = setInterval(roll, 2000);

// 	box.onmouseover = function(){
// 		clearInterval(time);
// 	}

// 	box.onmouseleave = function(){
// 		time = setInterval(roll, 2000);
// 	}

// 	for(i =0 ;i <click_list.length; i++) {
// 		change(i)
// 	}

// 	function change(b){
// 		click_list[b].onclick = function(){
// 			a = b
// 			roll()
// 		}
// 	}

// 	click_left.onmouseover = function(){
// 		click_left.style.backgroundColor='#746B55';
// 		click_left.style.color='#FFF';
// 	}

// 	click_left.onmouseleave = function(){
// 		click_left.style.backgroundColor='';
// 		click_left.style.color='#D2CEC6';
// 	}

// 	click_right.onmouseover = function(){
// 		click_right.style.backgroundColor='#746B55';
// 		click_right.style.color='#FFF';
// 	}

// 	click_right.onmouseleave = function(){
// 		click_right.style.backgroundColor='';
// 		click_right.style.color='#D2CEC6';
// 	}

	
// 	click_left.onclick = function(){
// 		if (a==1) {
// 			a = img_list.length-1;
// 		}else if (a==0) {
// 			a = img_list.length-2
// 		}else{
// 			a-=2
// 		};
// 		roll()
// 	}

// 	click_right.onclick = function(){
// 		roll()
// 	}
// }

$(function  () {
	var num = 0;
	function run () {

		$('.img_list').eq(num).fadeIn().siblings().fadeOut();

		$('.click_list').eq(num).css('background', '#657C87').siblings().css('background', '#fff');

		num++;

		if(num==$('.img_list').length){
			num=0;
		}
		
	}

	time = setInterval(run, 1000);

	$('#box').hover(function() {
		clearInterval(time);
	}, function() {
		time = setInterval(run, 1000);
	});


	$('.click_list').click(function(event) {
		num = $(this).index();
		run();
	});

	$('#click_right').click(function(event) {
		run()
	});

	$("#click_right").hover(function() {
		$("#click_right").css("background-color","#746B55");
  		$("#click_right").css("color","#FFF");
	}, function() {
		$("#click_right").css("background-color","");
  		$("#click_right").css("color","");/* Stuff to do when the mouse leaves the element */
	});

	$("#click_left").hover(function() {
		$("#click_left").css("background-color","#746B55");
  		$("#click_left").css("color","#FFF");
	}, function() {
		$("#click_left").css("background-color","");
  		$("#click_left").css("color","");/* Stuff to do when the mouse leaves the element */
	});

	$('#click_left').click(function(event) {
		if(num==1){
			num = $('.img_list').length-1;
		}else if(num==0){
			num = $('.img_list').length-2;
		}else{
			num-=2;
		}
		
		run();
	});


})